<template>
  <div class="computertwo">
    <div class="computerBox">
      <h1>指标达标率</h1>
      <div>
        <p id="container6">
        </p>
        <p id="container7">
        </p>
      </div>
      <div class="down">
        <p>CPU使用达标率</p>
        <p>内存使用达标率</p>
      </div>
    </div>

  </div>
</template>

<script>
  import echarts from "echarts";
  import reslist from "../../json/position.js";
  import chartmixins from "../../chartmixins.js";
  export default {
    name:  "computer-two",
    mixins: [chartmixins],
    mounted() {
      this.equipment1()
      this.equipment2()
    },
    methods: {
      equipment1() {
        var dom = document.getElementById("container6");
        var myChart = echarts.init(dom, "dark");
        var app = {};
        var rad = 90
        let option = null;
        option = {
          backgroundColor: "#0000",
          color: ["#2ebc7e", "#00082F"],
          title: {
            text: rad+'%',
            x: 'center',
            y: 'center',
            itemGap: 20,
            textStyle: {
              color: '#ffffff',
              fontFamily: '微软雅黑',
              fontSize: 18,
              // fontWeight : 'bolder'
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{d}%"
          },
          series: [
            {
              name: "占比",
              type: "pie",
              radius: ["65%", "80%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "15",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle:{
                borderColor:'#053a76',
                borderWidth:1,
              },
              data: [
                {value: rad, name: ""},
                {value: 100 - rad, name: ""}
              ]
            }
          ]
        };

        myChart.setOption(option, true);

        this.myChart = myChart;

        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      },
      equipment2() {
        var dom = document.getElementById("container7");
        var myChart = echarts.init(dom, "dark");
        var app = {};
        var rad = 92
        let option = null;
        option = {
          backgroundColor: "#0000",
          color: ["#2ebc7e", "#00082F"],
          title: {
            text: rad+'%',
            x: 'center',
            y: 'center',
            itemGap: 20,
            textStyle: {
              color: '#ffffff',
              fontFamily: '微软雅黑',
              fontSize: 18,
              // fontWeight : 'bolder'
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{d}%"
          },
          series: [
            {
              name: "占比",
              type: "pie",
              radius: ["65%", "80%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "15",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle:{
                borderColor:'#053a76',
                borderWidth:1,
              },
              data: [
                {value: rad, name: ""},
                {value: 100 - rad, name: ""}
              ]
            }
          ]
        };

        myChart.setOption(option, true);

        this.myChart = myChart;

        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      },

    }
  }
</script>

<style lang='scss' scoped>
  .computertwo {
    width: 100%;
    height: 100%;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    .computerBox {
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      h1{
        width:100px;
        height:30px;
        font-size:15px;
        color:#ffffff;
        font-weight: normal;
        text-align: center;
        line-height: 30px;
        background-color: #0000;
        border-radius: 4px;
        margin-left: 50px;
      }
      div {
        height: 100%;
        flex: 2;
        display: flex;
        flex-direction: row;
        p {
          margin: 0;
          height: 100%;
          padding-left: 10px;
          flex: 1;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: flex-end;
        }
      }
      .down {
        flex: 1;
        p {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: flex-start;
          margin-top: 10px;
          font-size: 15px;
        }
      }
    }
  }
</style>
